import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { SongsWrapper } from './style';
import CatListHead from './c-cps/catListHead';
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store/hooks';
import { fetchCatList } from './store/songs';
import { getPlayList } from './service/song';
import SongsItemV1 from '@/components/songs-item-v1';
import { getImgOnSize, numberFormat } from '@/utils/format';
import RankCommend from '@/components/rankCommend';
import { Pagination } from 'antd';
import { getComments } from '../ranking/service/rank';
interface IProps {
  children?: ReactNode;
}

const Songs: FC<IProps> = (props) => {
  const [playLists, setPlayLists] = useState<any[]>([]);
  const dispatch = useAppDispatch();

  const { currentCat } = useAppSelector(
    (state) => ({
      currentCat: state.songs.currentCat,
    }),
    shallowEqualApp
  );
  const [comments, setComments] = useState<any>(null);
  const [offset, setOffset] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [textTotal, setTextTotal] = useState(140);

  const limit = 20;
  let commentsTotal = 0;
  let total = 0;
  if (comments) {
    commentsTotal = comments.total;
    total = Math.ceil(commentsTotal / limit);
  }
  useEffect(() => {
    dispatch(fetchCatList());
  }, []);
  // useEffect(() => {
  //   fetchComments();
  // }, [offset]);
  // const fetchComments = useCallback(async () => {
  //   // console.log('album', id);
  //   setIsLoading(false);
  //   try {
  //     const response: any = await getComments(id, limit, (offset - 1) * limit, category);
  //     setComments(response);
  //   } catch (error) {
  //     console.log('ERROR', error);
  //   } finally {
  //     setIsLoading(true);
  //   }
  // }, [id, offset]);

  // const handlePgChange = useCallback((page: number) => {
  //   setOffset(page);
  //   // console.log(page);
  // }, []);
  const fetchPlayList = useCallback(async () => {
    const response: any = await getPlayList(35, currentCat);
    console.log(response);
    setPlayLists(response.playlists);
  }, [currentCat]);
  useEffect(() => {
    fetchPlayList();
  }, [currentCat]);
  return (
    <SongsWrapper className="w980">
      <div className="content">
        <CatListHead></CatListHead>
        <div className="playLists">
          {playLists.map((playList, index) => {
            return (
              <SongsItemV1
                playCount={playList.playCount}
                picUrl={getImgOnSize(playList.coverImgUrl, 140)}
                name={playList.name}
                tips={'by' + playList.creator.nickname}
                key={index}
                id={playList.id}
              ></SongsItemV1>
            );
          })}
        </div>
        {/* <Pagination
          defaultCurrent={offset}
          total={total}
          showSizeChanger={false}
          align="center"
          onChange={handlePgChange}
        /> */}
      </div>
    </SongsWrapper>
  );
};

export default memo(Songs);
